<style src="@/css/components/table.css"></style>
<style src="@/css/components/popover.css"></style>
<style src="@/css/components/button.css"></style>
<style src="@/css/components/main.css"></style>
<style>

.test-papers{
    background:#fff;
    padding:30px;
}
.test-papers-header {
    display: flex;
    justify-content: space-between;
    padding-bottom: 20px;
}

.pages {
    margin-top: 30px;
}

.el-icon-caret-top:before,.el-icon-caret-bottom:before {
    content: ""
}
</style>

<template>
<section class="test-papers" v-if="show">
    <div class="test-papers-header">
        <el-button type="primary" class="showdow" @click="gotoPath('/effect/create-qsn')" >创建问卷</el-button>
        <el-input
            placeholder="请输入问卷名称"
            suffix-icon="el-icon-search"
            class="search"
            v-model="keywords">
        </el-input>
    </div>

    <el-table :data="QNRPaperList" style="width: 100%" class="newTab first-table" @sort-change="rankFn">
        <el-table-column prop="ExamTitle" label="问卷名称" min-width="25%">
            <template slot-scope="scope">
                <el-popover
                    popper-class="popover"
                    placement="top-start"
                    width="200"
                    trigger="hover"
                    :content="scope.row.ExamTitle">
                    <span slot="reference">{{scope.row.ExamTitle.substr(0,10)}}</span>
                </el-popover>
            </template>
        </el-table-column>

        <el-table-column prop="ExamDesc" label="描述" min-width="35%">
            <template slot-scope="scope">
                <el-popover
                    popper-class="popover"
                    placement="top-start"
                    width="200"
                    trigger="hover"
                    :content="scope.row.ExamDesc">
                    <span slot="reference">{{scope.row.ExamDesc.substr(0,25)}}</span>
                </el-popover>
            </template>
        </el-table-column>
        <el-table-column prop="CreateTime" label="创建时间" min-width="20%" sortable="custom"></el-table-column>
        <el-table-column label="操作" min-width="20%">
            <template slot-scope="scope">
                <span class="operate" @click="deleteFn(scope.row.ExamLibID)">删除</span>
                <router-link tag="span" :to="{ path: '/effect/edit-qsn', query: { ExamLibID: scope.row.ExamLibID }}" class="operate">编辑</router-link>
                <router-link tag="span" :to="{ path: '/effect/paper-detail', query: { ExamLibID: scope.row.ExamLibID, type:1 }}" class="operate">详情</router-link>
            </template>
        </el-table-column>
    </el-table>

    <pageModel class="pages newPage" :total="total" :page="page" @changePageSize="getPageSize" @changePage="getPage" v-if="total >= 10"></pageModel>

    <!-- 弹窗区 -->
    <el-dialog
        title="提示"
        :visible.sync="deletePapers"
        class="new-dialog"
        width="480px"
        :before-close="handleClose">
        <div class="cont">问卷删除后，将无法恢复</div>
        <span slot="footer" class="dialog-footer">
            <el-button type="text no-border" @click="deletePapers = false">取消</el-button>
            <el-button type="primary"  class="add" @click="delExam">确 定</el-button>
        </span>
    </el-dialog>
</section>

<div class="test-papers no-temporarily" v-else>
    <img src="../../images/ic-default.png" alt="">
    <p>即将上线，敬请期待</p>
</div>
</template>

<script>

	import qs from 'qs'

    import pageModel from "components/pageModel.vue"

	export default{
		data: function(){
			return {
                show:false,
				QNRPaperList:[], //  问卷库问卷列表
				keywords:'',
				pageSize:10,
                page:1,
                total:0,
                path:[
                    {
                        name:'效果评估',
                        path:'/effect/test-papers'
                    },
                    {
                        name:'问卷库'

                    }
                ],

                ExamLibID:'',
                deletePapers:false
            }
		},
		mixins: [mixinMethods],
        watch:{
            keywords() {
                this.page = 1
                this.initGetQNRPaperList()
            }
        },
        components:{
            pageModel
        },

		methods: {
			initGetQNRPaperList(page){
				axios.post('/com/exam/getQNRLibList', qs.stringify({
					keywords:this.keywords,
					pagesize:this.pageSize,
					page: this.page,
                    createOrder:this.order
                })).then( (res) => {
                    var d = res.data;
                    if(d.flag == 1){
                        this.QNRPaperList = d.data.Rows;
						this.total = Number(d.data.Total);
                    }else{
                    	this.$message.error(d.msg);
                    }
                })
            },

            // 当前显示条数发生改变
            getPageSize(value) {
                this.pageSize = value
                this.initGetQNRPaperList()
            },

            // 当前分页改变
            getPage(value) {
                this.page = value
                this.initGetQNRPaperList()
            },

            deleteFn(id) {
                this.ExamLibID = id
                this.deletePapers= true
            },

            // 删除
            delExam() {
                axios.post('/com/exam/delExam', qs.stringify({
                    ExamLibID:this.ExamLibID
                })).then( (res) => {
                    var d = res.data;
                    if(d.flag == 1){
                        this.page = 1
                        this.initGetQNRPaperList()
                        this.deletePapers = false
                    }
                })

            },

            rankFn(value) {
                this.order = (value.order  == 'ascending' ? 'asc' : 'desc')
                this.initGetQNRPaperList()
            }

		},

		mounted: function(){
			this.initGetQNRPaperList();
			// 设置面包屑
            this.$store.commit('setPath', this.path)
		}
	}


</script>
